<template>
  <div class="cartcontrol">
    <!--环动没有效果的话,应该name没有对应 -->
    <transition name="move">
     <!--阻止事件冒泡,防止添加减号操作的时候，同时出发点击进行详情页 -->
     <div class="cart-minus"  v-show="food.count > 0" @click.stop.prevent="minusCart($event)">
       <!--transition设置线性环动效果 -->
       <span class="inner icon-remove_circle_outline"></span>  
     </div>
    </transition>
    <div class="cart-count" v-show="food.count > 0">{{food.count}}</div>
    <!--阻止事件冒泡,防止添加减号操作的时候，同时出发点击进行详情页 -->
    <div class="cart-add icon-add_circle" @click.stop.prevent="addCart($event)"></div>
  </div>    
</template>

<script>
import Vue from 'vue';

export default {
    props: {
      food: {
        type: Object
      }
    },
    data() {
      return {};
    },
    created() {
        //console.log(this.food);
    },
    methods: {
      addCart(event) {
        //兼容防止pc端触发2次事件
       if(!event._constructed){
        return;
       }
       console.log('触发cartcontrol子组件中的addcart事件,递增购买数量:  ' + this.food.count);
       if(!this.food.count){
          //this.food.count = 1; // Vue不允许在已经创建的实例上动态添加新的根级响应式属性,需要使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上
          Vue.set(this.food,'count',1);// 向对象/数组添加是非响应的，强制响应
       }else {
          this.food.count++;
       }
       this.$emit('addCart', event.target); // 父组件goods中@addCart监听子组件shopcart。将点击dom对象作为参数传递到父组件的一个事件
      },
      minusCart(event) {
        //兼容防止pc端触发2次事件
        if(!event._constructed){
          return;
        }
        if(this.food.count){
          this.food.count -- ;
        }
      }
    }
}
</script>

<style lang="scss" rel="stylesheet/scss">
@import "../../../assets/style/mixin.scss";

.cartcontrol {
  .cart-minus{
    display: inline-block;
    padding: 6px 0 6px 6px;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    &.move-enter-active, &.move-leave-active {
      transition: all 0.2s linear;//线性环动
      .inner {
        transition: all 0.2s inherit; //线性环动 
        transform: rotate(0);
      }
    }
    .inner {
     display: inline-block;//若不设置,则高度为0
     line-height: 24px;
     font-size: 24px;
     color:rgb(0, 160, 220);
    }
    &.move-enter,.move-leave-to {
      opacity: 0;
      transform: translate3d(24px,-2px,0);
      .inner {
        transform: rotate(-180deg);
      }
    }
  }
  .cart-count {
    display: inline-block; 
    vertical-align: top;
    width: 12px;
    padding-top: 6px;
    font-size: 10px;
    line-height: 24px;
    text-align: center;
    color:rgb(147, 153, 159);
  }
  .cart-add  {
    display: inline-block;
    font-size: 24px;
    line-height: 24px;
    color:rgb(0, 160, 220);
  }
}
</style>